<template>
	<!-- 审核各个模块分页列表查询 -->
	<view class="reviewed">	
		<z-paging-swiper>
			<template #top>
				<z-tabs ref="tabs" :current="currentNum" :list="tabList" @change="tabChange"></z-tabs>
			</template>
			
			<swiper :current="currentNum" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
				<swiper-item v-for="(item,index) in stateLists" :key="item.value">
					<!-- 具体的卡片组件，查询单个模块的分页列表 -->
					<soup-list :tabIndex="index" :currentIndex="currentNum"></soup-list>
				</swiper-item>
			</swiper>
			
		</z-paging-swiper>

	</view>
</template>

<script setup>

import { computed, ref } from "vue";
import {stateLists} from "@/utils/common.js"

import {} from "@dcloudio/uni-app"

const tabs = ref(null)
const currentNum = ref(0)

const tabList = computed(()=> {
 return	stateLists.map(item=>({...item,name:item.text}))
})



const swiperTransition = (e)=>{
	//console.log(e.detail.dx)
	tabs.value.setDx(e.detail.dx)
}

const swiperAnimationfinish = (e)=>{
	currentNum.value = e.detail.current
	tabs.value.unlockDx()
	//tabs.value.setActiveTab(currentNum.value)
}

// 点击tab 触发轮播同时切换
const tabChange = (e)=>{
	currentNum.value = e
}
</script>

<style scoped lang="scss">
.reviewed{
	swiper{
		height: 100%;
	}
}
</style>
